<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<script src="../../resources/ahem.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
        <style type="text/css">
            #svgRoot {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                left: 0px;
                font-family: Ahem;
                font-size: 10px;
            }

            .test { fill: blue; pointer-events: bounding-box; }
            .test:hover { fill: green; visibility: visible; }
        </style>
        <title>Tests for pointer-events=bounding-box - hit testing.</title>
    </head>
    <body>
        <pre id="console"></pre>

        <svg id="svgRoot" width="800px" height="360px"
            viewBox="0 0 800 360" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" opacity="0">
            <g class="test" id="test1" transform="rotate(15)">
                <circle id="circle1" cx="50" cy="50" r="10"/>
                <circle cx="150" cy="150" r="10"/>
            </g>
            <circle class="test" id="circle2" cx="400" cy="150" r="50" visibility="hidden"/>
            <text class="test" id="text1" x="100" y="20">Text should change color when mouse is within <tspan id="tspan1" dy="3em">the bbox.</tspan></text>
            <text class="test" id="text2" x="150" y="100" transform="rotate(15)">Text should change color when mouse is within <tspan id="tspan2" dy="3em">the bbox.</tspan></text>
            <text class="test" id="text3" x="200" y="280" transform="rotate(5)">Text should end here.<tspan id="tspan3" dy="2em" display="none">invisible</tspan></text>
            <image class="test" id="image1" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'><rect x='10' y='10' width='20' height='10' fill='blue'/></svg>" 
                   width="50" height="30" visibility="hidden" transform="translate(0,200)"/>
        </svg>

        <script type="text/javascript">
            document.body.onclick = function(evt) {
                document.getElementById("console").innerHTML = "mouse at " + evt.x + "," + evt.y;
            };

            var group1 = document.getElementById("test1");
            var circle1 = document.getElementById("circle1");
            var circle2 = document.getElementById("circle2");
            var text1 = document.getElementById("text1");
            var tspan1 = document.getElementById("tspan1");
            var text2 = document.getElementById("text2");
            var tspan2 = document.getElementById("tspan2");
            var text3 = document.getElementById("text3");
            var tspan3 = document.getElementById("tspan3");
            var image1 = document.getElementById("image1");

            var pointsOnCircle1 = [
                {x: 36, y: 60},
                {x: 42, y: 67}
            ];

            var pointsNotOnCircle1 = [
                {x: 50, y: 50},
                {x: 50, y: 55}
            ];

            var pointsInsideBBoxOfCircle1 = [
                {x: 100, y: 100},
                {x: 137, y: 84},
                {x: 51, y: 156},
                {x:70, y:120}
            ];

            var pointsOnCircle2 = [
                {x: 400, y: 150},
                {x: 432, y: 182},
                {x: 361, y: 122}
            ];

            var pointsInsideBBoxOfCircle2 = [
                {x: 438, y: 103},
                {x: 450, y: 200}
            ];

            var pointsOnText1 = [
                {x: 134, y: 16}
            ];

            var pointsOnTspan1 = [
                {x: 579, y: 46}
            ];

            var pointsNotOnText1 = [
                {x: 395, y: 73},
                {x: 74, y: 5}
            ];

            var pointsInsideBBoxOfText1 = [
                {x: 435, y: 32},
                {x: 115, y: 46}
            ];

            var pointsOnText2 = [
                {x: 178, y: 146}
            ];

            var pointsOnTspan2 = [
                {x: 568, y: 283}
            ];

            var pointsNotOnText2 = [
                {x: 319, y: 161},
                {x: 179, y: 131}
            ];

            var pointsInsideBBoxOfText2 = [
                {x: 295, y: 214},
                {x: 444, y: 222}
            ];

            var pointsOnText3 = [
                {x: 198, y: 291},
                {x: 286, y: 301}
            ];

            var pointsNotOnText3 = [
                {x: 302, y: 337},
                {x: 348, y: 335}
            ];

            var pointsOnImage1 = [
                {x: 19, y: 215},
                {x: 45, y: 225}
            ];

            function hitTest(point, element, shouldContain, optionalLabel) {
              const label = optionalLabel || element.id;
              test(() => {
                let contain = element.contains(document.elementFromPoint(point.x, point.y));
                if (shouldContain)
                  assert_true(contain);
                else
                  assert_false(contain);
                }, `${label} ${shouldContain ? 'contains' : 'does not contain'} point at (${point.x}, ${point.y})`);
            }

            pointsOnCircle1.forEach(point => hitTest(point, circle1, true));
            pointsNotOnCircle1.forEach(point => hitTest(point, circle1, false));
            pointsInsideBBoxOfCircle1.forEach(point => hitTest(point, group1, true, 'group1'));

            pointsOnCircle2.forEach(point => hitTest(point, circle2, true));
            pointsInsideBBoxOfCircle2.forEach(point => hitTest(point, circle2, true, 'bbox of circle2'));

            pointsOnText1.forEach(point => hitTest(point, text1, true));
            pointsOnTspan1.forEach(point => hitTest(point, tspan1, true));
            pointsNotOnText1.forEach(point => hitTest(point, text1, false));
            pointsInsideBBoxOfText1.forEach(point => hitTest(point, text1, true, 'bbox of text1'));

            pointsOnText2.forEach(point => hitTest(point, text2, true));
            pointsOnTspan2.forEach(point => hitTest(point, tspan2, true));
            pointsNotOnText2.forEach(point => hitTest(point, text2, false));
            pointsInsideBBoxOfText2.forEach(point => hitTest(point, text2, true, 'bbox of text2'));

            pointsOnText3.forEach(point => hitTest(point, text3, true));
            pointsNotOnText3.forEach(point => hitTest(point, text3, false));

            pointsOnImage1.forEach(point => hitTest(point, image1, true));
        </script>
    </body>
</html>
